<script setup lang="ts">
  import { loadFull } from 'tsparticles'

  const options = {
    background: { color: { value: '#e5e5e5' } },
    fpsLimit: 120,
    interactivity: {
      events: {
        onClick: { enable: true, mode: 'push' },
        onHover: { enable: true, mode: 'repulse' },
        resize: true,
      },
      modes: {
        bubble: { distance: 400, duration: 2, opacity: 0.8, size: 40 },
        push: { quantity: 4 },
        repulse: { distance: 200, duration: 0.4 },
      },
    },
    particles: {
      color: { value: '#6fb98f' },
      links: {
        color: '#6fb98f',
        distance: 150,
        enable: true,
        opacity: 0.5,
        width: 1,
      },
      collisions: { enable: true },
      move: { direction: 'none', enable: true },
      number: { density: { enable: true, area: 800 }, value: 80 },
      shape: { type: 'circle' },
      size: { value: { min: 1, max: 5 } },
    },
    detectRetina: true,
  }

  /*五角星*/
  const options2 = {
    fpsLimit: 60,
    interactivity: {
      detectsOn: 'canvas',
      events: {
        onClick: {
          // 开启鼠标点击的效果
          enable: true,
          mode: 'push',
        },
        onHover: {
          // 开启鼠标悬浮的效果(线条跟着鼠标移动)
          enable: true,
          mode: 'grab',
        },
        resize: true,
      },
      modes: {
        // 配置动画效果
        bubble: {
          distance: 400,
          duration: 2,
          opacity: 0.8,
          size: 40,
        },
        push: {
          quantity: 4,
        },
        grab: {
          distance: 200,
          duration: 0.4,
        },
        attract: {
          // 鼠标悬浮时，集中于一点，鼠标移开时释放产生涟漪效果
          distance: 200,
          duration: 0.4,
          factor: 5,
        },
      },
    },
    particles: {
      color: {
        value: '#BA55D3', // 粒子点的颜色
      },
      links: {
        color: '#FFBBFF', // 线条颜色
        distance: 150, //线条距离
        enable: true,
        opacity: 0.4, // 不透明度
        width: 1.2, // 线条宽度
      },
      collisions: {
        enable: true,
      },
      move: {
        attract: { enable: false, rotateX: 600, rotateY: 1200 },
        bounce: false,
        direction: 'none',
        enable: true,
        out_mode: 'out',
        random: false,
        speed: 0.5, // 移动速度
        straight: false,
      },
      number: {
        density: {
          enable: true,
          value_area: 800,
        },
        value: 80, //粒子数
      },
      opacity: {
        //粒子透明度
        value: 0.7,
      },
      shape: {
        //粒子样式
        type: 'star',
      },
      size: {
        //粒子大小
        random: true,
        value: 3,
      },
    },
    detectRetina: true,
  }
  const particlesInit = async (engine) => {
    await loadFull(engine)
  }
  const particlesLoaded = async (container) => {
    console.log('Particles container loaded', container)
  }
</script>

<script lang="ts">
  export default {
    name: 'Particle',
  }
</script>

<template>
  <div>
    ds
<!--    <Particles-->
<!--      id="tsparticles"-->
<!--      :particlesInit="particlesInit"-->
<!--      :particlesLoaded="particlesLoaded"-->
<!--      :options="options"-->
<!--    />-->
  </div>
</template>

<style scoped lang="scss"></style>
